<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2</title>
		<style>
			#btn{
				padding: 20px;
				border: none;
				margin-right: 5px;
				background-color: #ddd;
			}
			.tab-content{
				width: 500px;
				height: 400px;
				background-color: #ffd700;
				position: relative;
				top: -17px;
				line-height: 400px;
				text-align: center;
			}
			
			}
			div p{
				line-height: 400px;
				margin: 0 auto;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button class="oneBtn" id="btn">tab01</button>
		<button class="twoBtn" id="btn">tab02</button>
		<button class="threeBtn" id="btn">tab03</button>
		<div class="tab-content">
			<p class="tab-text">	
			</p>
		</div>
		<script>
			$(".oneBtn").click(function(){
				$(".tab-text").text("文本内容一")
				$(".oneBtn").css("background-color","#ffd700")
				$(".twoBtn").css("background-color","#ddd")
				$(".threeBtn").css("background-color","#ddd")	
			})
			
			$(".twoBtn").click(function(){
				$(".tab-text").text("文本内容二")
				$(".oneBtn").css("background-color","#ddd")
				$(".twoBtn").css("background-color","#ffd700")
				$(".threeBtn").css("background-color","#ddd")
			})
			
			$(".threeBtn").click(function(){
				$(".tab-text").text("文本内容三")
				$(".oneBtn").css("background-color","#ddd")
				$(".twoBtn").css("background-color","#ddd")
				$(".threeBtn").css("background-color","#ffd700")
			})
			
		</script>
	</body>
</html>